<template>
  <el-dialog title="添加管理员" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"
             :close-on-click-modal="false">
    <el-form :model="addAdminForm" :rules="addAdminRules" ref="addAdminRef" label-width="80px">
      <el-form-item label="登录名" prop="ad_uname">
        <el-input v-model="addAdminForm.ad_uname" clearable></el-input>
        <span class="err-message" v-if="nameUsed">该登录名已被使用</span>
      </el-form-item>
      <el-form-item label="姓名" prop="ad_name">
        <el-input v-model="addAdminForm.ad_name" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="ad_sex">
        <el-select v-model="addAdminForm.ad_sex" >
          <el-option label="保密" :value="0"></el-option>
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="ad_phone">
        <el-input v-model="addAdminForm.ad_phone" clearable></el-input>
        <span class="err-message" v-if="phoneUsed">该手机号已被绑定</span>
      </el-form-item>
      <el-form-item label="邮箱" prop="ad_email">
        <el-input v-model="addAdminForm.ad_email" clearable></el-input>
        <span class="err-message" v-if="emailError">邮箱格式错误</span>
      </el-form-item>
      <el-form-item label="账号状态" prop="ad_status">
        <el-select v-model="addAdminForm.ad_status" >
          <el-option label="正常" :value="1"></el-option>
          <el-option label="冻结" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账号身份" prop="ad_rank">
        <el-select v-model="addAdminForm.ad_rank" >
          <el-option label="普通管理员" :value="0"></el-option>
          <el-option label="超级管理员" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="ad_pw">
        <el-input v-model="addAdminForm.ad_pw" show-password clearable placeholder="密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="ad_confirm_pw">
        <el-input v-model="addAdminForm.ad_confirm_pw" show-password clearable placeholder="密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddAdmin">添加管理员</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {addAdmin} from "@/network/system/administrator";

export default {
  name: "AddAdmin",
  props:{
    addDialogVisible:false
  },
  data(){
    //验证规则
    let checkPhone = ((rule,value,callback)=>{   //验证手机号
      if(!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)){
        return callback(new Error('手机号码格式不正确！'));
      }
      return callback();
    })
    let checkPw = ((rule,value,callback)=>{  //验证密码
      if(!/\w{6,20}/.test(value) || !/[0-9]/.test(value) || !/[A-Za-z]/.test(value)) {
        return callback(new Error('密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母'));
      }
      callback();
    })
    let checkConfirmPw = ((rule,value,callback)=>{  //验证确认密码
      if(value!=this.addAdminForm.ad_pw){
        return callback(new Error("两次密码不一致!"));
      }
      if(!/\w{6,20}/.test(value) || !/[0-9]/.test(value) || !/[A-Za-z]/.test(value)) {
        return callback(new Error('密码长度6到20，可由字母、数字、下划线组成，必须包含数字和字母'));
      }
      return callback();
    })
    let checkEmail = ((rule,value,callback)=>{  //验证邮箱
      if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value)){
        return callback(new Error('邮箱格式不正确！'));
      }
      return callback();
    })
    return{
      nameUsed: false, //该账号名已被使用
      phoneUsed:false,  //该手机号已被绑定
      emailError: false,  //邮箱格式错误
      addAdminForm: {  //添加管理员表单
        ad_uname:'',  //登录名
        ad_name:'',  //姓名
        ad_sex:0,  //性别： 0-保密 1-男 2-女
        ad_phone:'', //电话号码
        ad_email:'',  //邮箱
        ad_pw:'', //密码
        ad_confirm_pw:'', //确认密码
        ad_status: 1,  //账号状态： 1正常 0冻结
        ad_rank: 0  // 身份：0普通管理员 1超级管理员
      },
      addAdminRules:{  //添加管理员规则
        ad_uname:[{ required: true, message: '请输入登录名', trigger: 'blur' }],
        ad_name:[{ required: true, message: '请输入姓名', trigger: 'blur' },],
        ad_phone:[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }],
        ad_email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }],
        ad_pw:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkPw, trigger: 'blur' },],
        ad_confirm_pw: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          { validator: checkConfirmPw, trigger: 'blur' }],
      },
    }
  },
  methods:{
    //将提示的信息清除
    closeMessage(){
      this.nameUsed = false;
      this.emailError = false;
      this.phoneUsed = false;
    },
    addDialogClosed(){  //点击 关闭对话框
      this.$emit("addDialogClosed");
    },
    onAddAdmin(){   //添加管理员
      this.$refs.addAdminRef.validate(valid=>{
        if(valid){
          addAdmin(this.addAdminForm).then(res=>{
            if(res.status==200){
              this.$message.success("添加管理员成功！");
              this.$refs.addAdminRef.resetFields();
              //将提示的相关信息清除
              this.closeMessage();
              //通知添加管理管理员成功
              this.$emit('afterAddingAdmin');
            } else if(res.data.status==300){
              this.closeMessage();
              this.nameUsed = true;
              this.$message.error(("该账号名已被使用！"));
            }else if(res.data.status==400){
              this.closeMessage();
              this.phoneUsed = true;
              this.$message.error("该手机号已被绑定！");
            }else if(res.data.status==450){
              this.closeMessage();
              this.emailError = true;
              this.$message.error("邮箱格式错误！");
            } else{
              this.$message.error("添加管理员失败，请重新添加！");
            }
          })
        }
        else{
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    }

  }
}
</script>

<style scoped>
  .err-message{
    color: #ff0000;
  }
</style>
